<template>
  <div class="categories">
    <div class="categories_header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>分类列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="categories_list_box">
      <div class="categories_list_box_box">
        <div class="categories_list_box_search">
          <el-button type="primary" class="add_categories" @click="addsort"
            >添加分类</el-button
          >
        </div>
        <!-- 添加分类 -->
        <el-dialog
          title="添加分类"
          :visible.sync="categoriesdialog"
          width="30%"
        >
          <div>
            <el-form label-position="left" label-width="80px" :model="sortForm">
              <el-form-item label="分类名称">
                <el-input v-model="sortForm.sortname"></el-input>
              </el-form-item>
              <el-form-item label="父级分类">
                <el-cascader
                  :options="sortFormdata"
                  v-model="sortFormlist"
                  :props="{
                    checkStrictly: true,
                    label: 'cat_name',
                    value: 'cat_id',
                    children: 'children',
                    expandTrigger: 'hover',
                  }"
                  clearable
                >
                </el-cascader>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="categoriesdialog = false">取 消</el-button>
            <el-button type="primary" @click="sureaddsort">确 定</el-button>
          </span>
        </el-dialog>
        <div class="categories_list_box_body">
          <!--  这是 一个 表格  -->
          <tree-table
            class="tb-cate"
            index-text="#"
            show-index
            stripe
            border
            :data="categoriesdata"
            :columns="columns"
            :expand-type="false"
            :selection-type="false"
          >
            <template slot="isok" slot-scope="scope">
              <i
                class="el-icon-error"
                v-if="scope.row.cat_deleted"
                style="color: red"
              ></i>
              <i class="el-icon-success" v-else style="color: lightGreen"></i>
            </template>
            <template slot="level" scope="scope">
              <el-tag
                type="primary"
                effect="plain"
                size="mini"
                v-if="scope.row.cat_level == 0"
                >一级</el-tag
              >
              <el-tag
                type="success"
                effect="plain"
                size="mini"
                v-else-if="scope.row.cat_level == 1"
                >二级</el-tag
              >
              <el-tag type="warning" effect="plain" size="mini" v-else
                >三级</el-tag
              >
            </template>
            <template slot="opt" slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="openedit(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="opendel(scope.row)"
                >删除</el-button
              >
            </template>
          </tree-table>

          <!-- 修改分类 -->
          <el-dialog title="修改分类" :visible.sync="dialog" width="30%">
            <div>
              <el-form
                label-position="left"
                label-width="80px"
                :model="editForm"
              >
                <el-form-item label="分类名称">
                  <el-input v-model="editForm.cat_name"></el-input>
                </el-form-item>
              </el-form>
            </div>

            <span slot="footer" class="dialog-footer">
              <el-button @click="dialog = false">取 消</el-button>
              <el-button type="primary" @click="sureedit">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getcategories, setedit, deleteedit, getaddsrot } from "@/api/wares.js";

export default {
  data() {
    return {
      dialog: false, // 修改 分类  的 弹框 是否 开启
      categoriesdialog: false, //添加分类框是否开启
      categoriesdata: [], // 商品 分类 数据
      sortFormdata: [], //  添加 分类 的 表单 数据
      columns: [
        { label: "分类名称", prop: "cat_name" },
        {
          label: "是否有效",
          prop: "cat_deleted",
          type: "template",
          template: "isok",
        },
        {
          label: "分类等级",
          prop: "cat_level",
          type: "template",
          template: "level",
        },
        {
          label: "操作",
          type: "template",
          template: "opt",
        },
      ],
      props: {
        expandType: false,
        selectionType: false,
      }, // 表格 的 配置
      sortForm: {
        // 添加 分类 的 表单 配置
        sortname: "",
      },
      sortFormlist: [],
      // 编辑 的 表单
      editForm: {
        id: "",
        cat_name: "",
      },
    };
  },
  mounted() {
    this.getcategoriesdata(); // 商品 分类 数据
  },
  methods: {
    getcategoriesdata() {
      // 商品 分类 数据
      getcategories({}).then((res) => {
        this.categoriesdata = res.data;
        console.log(res.data);
      });
    },
    // 表单数据
    getsortFormdata() {
      getcategories({
        type: 2,
      }).then((res) => {
        this.sortFormdata = res.data;
        console.log(res.data);
      });
    },

    // 添加分类 数据
    addsort() {
      this.categoriesdialog = true;
      this.getsortFormdata(); // 表单数据
    },
    //确定 天机 分类
    sureaddsort() {
      let parems = {
        cat_name: this.sortForm.sortname,
        cat_pid: this.sortFormlist[this.sortFormlist.length - 1],
        cat_level: this.sortFormlist.length,
      };

      getaddsrot(parems).then((res) => {
        // console.log(res);
        this.categoriesdialog = false;
        this.getcategoriesdata(); // 商品 分类 数据
      });
      // console.log(this.sortForm);
    },

    // 点击 打开 修改 分类 的  弹框
    openedit(scope) {
      this.dialog = true;
      console.log(scope);
      this.editForm.id = scope.cat_id;
      this.editForm.cat_name = scope.cat_name;
    },
    // 确定 修改 分类
    sureedit() {
      //  修改 分类 接口
      if (!this.editForm.cat_name) {
        this.$message({
          message: "不可为空",
          duration: 1000,
          type: "warning",
        });
        return;
      } else {
        setedit(this.editForm).then((res) => {
          this.dialog = false;
          this.getcategoriesdata();

          this.$message({
            message: res.meta.msg,
            duration: 1000,
            type: "success",
          });
        });
      }
    },
    // 删除
    opendel(scope) {
      let id = scope.cat_id;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteeditdata(id);

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除调接口
    deleteeditdata(cid) {
      deleteedit(cid)
        .then((res) => {
          this.getcategoriesdata();
        })
        .catch((err) => {
          // console.log(err);
        });
    },
  },
  components: {},
};
</script>

<style lang='scss' scoped>
.icon-lvseduihao {
  color: rgb(87, 190, 83);
}
.icon-hongsechahao {
  color: red;
}
.categories {
  width: 100%;
  height: 100%;
  background: #eee;
  .categories_header {
    width: 100%;
    height: 80px;
    padding-top: 30px;
    padding-left: 30px;
  }
  .categories_list_box {
    width: 100%;
    height: calc(100% - 80px);
    .categories_list_box_box {
      width: 95%;
      height: 100%;
      background: #fff;
      margin: 0 auto;
      .categories_list_box_search {
        width: 95%;
        height: 80px;
        margin: 0 auto;
        line-height: 80px;
      }

      .categories_list_box_body {
        width: 95%;
        height: 100%;
        margin: 0 auto;
        padding-top: 20px;
      }
    }
  }
}
</style>
<style>
.el-input__inner {
  width: 430px !important;
}
</style>

